<template>
  <div class="dialog-list">
    <!-- 头部操作 -->
    <DialogHeader @get-dialogs="listDialogs"></DialogHeader>

    <!-- 对话列表 -->
    <div class="dialog-scoll">
      <div v-for="(session, index) in sessions" :key="session.id">
        <DialogListItem
          :session="session"
          :selected="currentSessionIndex === index"
          @click="setSelectd(session, index)"
          @delete-dialog="deleteDialog(index)"
        ></DialogListItem>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import DialogListItem from "./DialogListItem.vue";
import { useRouter } from "vue-router";
import { useChatStore } from "@/store/useChatStore";
import DialogHeader from "@/components/dialog/DialogHeader.vue";

const router = useRouter();
const chatStore = useChatStore();

const sessions = ref(chatStore.sessions);
const currentSessionIndex = ref(chatStore.currentSessionIndex);

// 设置选中的会话
const setSelectd = (session: any, index: number) => {
  chatStore.selectSession(index);
  currentSessionIndex.value = index;
  router.push({ path: `/chat/${session.id}` });
};

// 删除对话
const deleteDialog = (index: any) => {
  chatStore.deleteSession(index);
  sessions.value = chatStore.sessions;
};

// 获取会话列表
const listDialogs = () => {
  sessions.value = chatStore.sessions;
};
</script>

<style scoped lang="scss">
.dialog-list {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  width: 260;
  height: "100%";
  border-right: 1px solid #f5f5f5;
}

.dialog-scoll {
  height: 100%; /* 设置一个固定高度 */
  overflow: scroll; /* 添加滚动条 */
}
</style>
